html::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

html {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

body {
  position: relative;
  min-height: 100vh;

  .grid {
    width: 100%;
    box-sizing: border-box;
    .grid-sizer{
      width: 23%;
    }
    .grid-item-holder {
      visibility: hidden;
      display: none;
      width: 0 !important;
      height: 0 !important;
    }
    .grid-item {
      width: 23%;
      margin: 10px;
      height: auto;
      display: inline-block;
      box-sizing: border-box;
      padding: 0;
      box-shadow: 0 0 10px rgba(178, 190, 195, 1.0);

      img {
        width: 100%;
        height: auto;
        position: relative;
        display: block;
      }

      .file-name {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 15px 5px;
        color: #ffffff;
        background: rgba(99, 110, 114, 0.5);
        font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
        letter-spacing: 1.3px;
        font-size: 16px;
      }
    }
  }

  .show-img-box {
    position: fixed;
    background: rgba(47, 47, 53, 0.8);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 9999;
    transition-duration: 0.5s;

    .show-img-bkg {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: -100;
    }

    .show-img-src {
      position: relative;
      height: 70vh;
      width: auto;
      max-width: 90vw;

    }

    @media screen and (max-device-width: 480px) {
      .show-img-src {
        height: 40vh;
      }
    }

    .show-img-clear {
      position: absolute;
      color: rgba(238, 247, 242, 1.0);
      text-shadow: 0 0 5px rgba(198, 230, 232, 1.0);
      right: 30px;
      top: 30px;
      margin-top: 20px;
      cursor: pointer;

      &::after {
        content: ">";
        position: relative;
        font-size: 60px;
        font-weight: 300;
      }

      &:hover {
        text-shadow: 0 0 15px rgba(198, 230, 232, 1.0);
      }
    }

    .show-img-left {
      position: absolute;
      color: rgba(238, 247, 242, 1.0);
      text-shadow: 0 0 5px rgba(198, 230, 232, 1.0);
      left: 20px;
      bottom: 50%;
      margin-top: 20px;
      cursor: pointer;
      transform: scaleY(1.8);

      &::after {
        content: "<";
        position: relative;
        font-size: 50px;
        font-weight: 300;
      }
    }

    .show-img-right {
      position: absolute;
      color: rgba(238, 247, 242, 1.0);
      text-shadow: 0 0 5px rgba(198, 230, 232, 1.0);
      right: 20px;
      bottom: 50%;
      margin-top: 20px;
      cursor: pointer;
      transform: scaleY(1.8);

      &::after {
        content: ">";
        position: relative;
        font-size: 50px;
        font-weight: 300;
      }
    }
  }

  .show-img-box-white {
    background: rgba(251, 236, 222, 0.85);
    transition-duration: 0.5s;

    .show-img-clear {
      color: rgba(43, 51, 62, 1.0);
      //text-shadow: 0 0 5px rgba(198,230,232,1.0) ;
      &:hover {
        text-shadow: 0 0 15px rgba(198, 230, 232, 1.0);
      }
    }
  }
}